<template>
  <view class="header">
    <view class="cu-bar">
      <view class="nav-wrap" @click="toUserInfo">
        <image :src="base64ToBlobUrl(user.headimg)" class="logo" />
      </view>
      <view class="info">
        <view class="username">{{ user.username }}</view>
        <view class="phone">{{ user.telephone }}</view>
      </view>
    </view>
  </view>
  <view class="cu-tools">
    <view class="cu-heading">特色功能</view>
    <hr style="width: 95%; margin: 0 auto" />
    <view class="cu-items">
      <view
        v-for="(item, index) in toolList"
        :key="index"
        class="cu-item"
        @click="onClickTool(item.id)"
      >
        <image :src="item.icon" class="cu-icon" />
        <view class="cu-label">{{ item.label }}</view>
      </view>
    </view>
  </view>
  <view class="mid-img">
    <image src="@/static/宣传图.png" class="cu-img-hb" />
  </view>
  <view class="other">
    <view class="ot-heading">其他功能</view>
    <view class="ot-item">
      <view class="ot-btn" @click="tofeed">
        <view>投诉反馈</view>
        >
      </view>
      <view class="ot-btn" @click="privi">
        <view>隐私政策</view>
        >
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onShow, onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { UserTool } from '@/types/myPage'
import { userInfo } from '@/api/home'
import { base64ToBlobUrl } from '@/common/img'

const user = ref()

const toolList = ref<UserTool[]>([
  {
    id: 1,
    label: '我的投票',
    icon: 'https://cdn-icons-png.flaticon.com/512/927/927295.png',
    url: 'vote'
  },
  {
    id: 2,
    label: '联系物业',
    icon: 'https://cdn-icons-png.flaticon.com/512/3014/3014736.png',
    url: 'property'
  },
  {
    id: 3,
    label: '报修记录',
    icon: 'https://cdn-icons-png.flaticon.com/512/8711/8711451.png',
    url: 'fix'
  },
  {
    id: 4,
    label: '活动记录',
    icon: 'https://cdn-icons-png.flaticon.com/512/17918/17918657.png',
    url: 'activity'
  },
  {
    id: 5,
    label: '退出登录',
    icon: 'https://cdn-icons-png.flaticon.com/512/4307/4307986.png',
    url: 'logout'
  }
])

const val = '18212567528'
const phone = val.replace(/[^0-9]+/g, '')
const onClickTool = (id: number) => {
  if (id === 2) {
    uni.makePhoneCall({
      phoneNumber: phone,
      success: (result) => {
        console.log(result)
      },
      fail: (error) => {
        // ts往剪切板写入东西
        uni.setClipboardData({
          data: '18212567528',
          success: (result) => {
            console.log(result)
          },
          fail: (error) => {
            console.log(error)
          }
        })
        // 复制到剪贴板失败后，弹窗
        uni.showModal({
          content: '拨打电话失败，电话号码已复制到你的剪切板',
          confirmText: '我知道了',
          showCancel: false,
          complete: (res) => {
            console.log(res)
          }
        })
        console.log(error)
      }
    })
  } else if (id === 1) {
    uni.navigateTo({ url: '/pages/others/votePage' })
  } else if (id === 4) {
    uni.switchTab({ url: '/pages/activity/activityPage' })
  } else if (id === 5) {
    uni.removeStorageSync('token')
    uni.navigateTo({ url: '/pages/others/loginPage' })
  } else {
    uni.navigateTo({ url: '/pages/others/repiarList' })
  }
}

const privi = () => {
  uni.navigateTo({ url: '/pages/others/privacyPolicy' })
}

const toUserInfo = () => {
  uni.navigateTo({ url: '/pages/my/userInfo' })
}

onLoad(async () => {
  const res = await userInfo()
  if (res.code === 200) {
    console.log(res)

    user.value = res.data
  } else {
    uni.navigateTo({ url: '/pages/others/loginPage' })
  }
})

onShow(async () => {
  uni.setNavigationBarTitle({
    title: '我的'
  })
  try {
    const res = await userInfo()
    if (res.code === 200) {
      user.value = res.data
    } else {
      uni.navigateTo({ url: '/pages/others/loginPage' })
    }
  } catch (err) {
    uni.navigateTo({ url: '/pages/others/loginPage' })
  }
})

const tofeed = () => {
  uni.navigateTo({ url: '/pages/others/feedback' })
}
</script>

<style lang="scss" scoped>
.header {
  height: 400rpx;
  background-color: #fda15e;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  .cu-bar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 40rpx;
    .info {
      width: 60%;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #fff;
      .username {
        font-size: 36rpx;
      }
      .phone {
        font-size: 32rpx;
        padding-top: 20rpx;
      }
    }
    .nav-wrap {
      margin-bottom: 10%;
      margin-left: 10%;
      margin-right: 40rpx;
      background-color: #fff;
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      .logo {
        height: 100%;
        width: 100%;
        border-radius: 50%;
      }
    }
  }
}
.cu-tools {
  height: 300rpx;
  width: 95%;
  background-color: #fff;
  margin: 0 auto;
  margin-top: -100rpx;
  border-radius: 20rpx;
  //设置下边框阴影
  box-shadow: 0 4rpx 12rpx rgba(189, 187, 189, 0.8);
  .cu-heading {
    width: auto;
    height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 10rpx;
    font-size: 34rpx;
    font-weight: bold;
  }
  .cu-items {
    width: 95%;
    margin: 0 auto;
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cu-item {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 10rpx;
      .cu-icon {
        width: 80rpx;
        height: 80rpx;
        margin: 0 auto;
      }
      .cu-label {
        font-size: 28rpx;
        color: #fda15e;
        padding: 20rpx 0;
      }
    }
  }
}
.mid-img {
  width: 95%;
  height: auto;
  margin: 0 auto;
  margin-top: 20rpx;
  border-radius: 10rpx;
  .cu-img-hb {
    width: 100%;
    height: 230rpx;
    border-radius: 10rpx;
  }
}
.other {
  width: 95%;
  height: auto;
  margin: 0 auto;
  margin-top: 20rpx;
  .ot-heading {
    font-size: 28rpx;
    font-weight: bold;
    padding: 0 10rpx;
  }
  .ot-item {
    width: 95%;
    margin: 0 auto;
    // 设置边框阴影
    box-shadow: 0 4rpx 12rpx rgba(189, 187, 189, 0.8);
    padding: 20rpx;
    margin-top: 40rpx;
    border-radius: 10rpx;
    .ot-btn {
      width: 100%;
      height: 84rpx;
      line-height: 84rpx;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
